一進入網頁就馬上要求登入或註冊，不是我們想要的，真正的X應該也沒有強制登入才能觀看內容。

我們修改useRegisterModal.tsx，把isOpen改成false。

import { create } from "zustand";

interface RegisterModalStore{
    isOpen: boolean;
    onOpen: () => void;
    onClose: () => void;
}

const useRegisterModal = create<RegisterModalStore>((set) => ({
    isOpen: false,
    onOpen: () => set({isOpen: true}),
    onClose: () => set({isOpen: false}),
}));

export default useRegisterModal;

發表文章的時候，需要帳號是很合理的，這個時候要求登入應該很正常，我們修改SidebarTweetButton.tsx，按下後會顯示登入視窗。

'use client'

import { useRouter } from "next/router"
import { FaFeather } from "react-icons/fa" 
import { useCallback } from "react"
import useLoginModal from "@/Hooks/useLoginModal"

const SidebarTweetButton = () => {
    const router = useRouter();
    const loginModal = useLoginModal();

    const onClick = useCallback(() => {
        router.push('/');
        loginModal.onOpen();
    }, [loginModal])

  return (
    <div onClick={onClick}>
        <div className="mt-6 lg:hidden rounded-full h-14 w-14 p-4 flex items-center justify-center bg-sky-500 hover:bg-opacity-80 transition cursor-pointer">
            <FaFeather size={24} color="white" />
        </div>
        <div className="mt-6 hidden lg:block px-4 py-2 rounded-full bg-sky-500 hover:bg-opacity-90 cursor-pointer transition">
            <p className="hidden lg:block text-center font-semibold text-white text-[20px]">
                Tweet
            </p>
        </div>
    </div>
  )
}

export default SidebarTweetButton

現在登入視窗要按Tweet才會出現了。

我們現在要開始處理後端了，首先安裝Prisma。

在終端機輸入：

npm i -d prisma

完成後輸入：

npx prisma init

產生資料庫連接設定檔案。

我們打開prisma/schema.prisma，因為我們要使用MongoDB，對這個檔案做一些修改。

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

接下來我們去MongoDB官網點免費試用，然後註冊一個帳號，過程很簡單，完成後到信箱收驗證信。

MongoDB：应用程序数据平台

驗證完成後，登入帳號，我們會看到畫面上有個【Build a Database】的深綠色按鈕，如果沒有的話，在側邊欄找到Database按下後，在畫面上找到Create按鈕。

接下來，畫面上有【M10】、【SERVERLESS】、【M0】三種選項，我們選擇最右邊免費的【M0】。

Provider選擇中間的【Google Cloud】，Region選【Taiwan】。

最後按下Create，進入下一個畫面。

這個畫面有一個很明顯的區塊，填寫完Username和Password，然後按下Create User。

接著來到下一個區塊，有個【Add My Current IP Address】，按下去之後點擊底部的【Finish and Close】。

未來登入的時候，如果畫面上有【My Current IP Address】的按鈕要按，因為大部分的人不是使用固定IP，當IP變化時就無法連接到MongoDB。